<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
        //页面加载时初始化
        window.onload = function () {
            initWs();
        }

        <!--初始化websocket连接-->
        var ws;

        function initWs() {
//判断浏览器是否支持webSocket技术
            if (window.WebSocket) {
                //支持webSocket
                //连接WebSocket服务器
                ws = new WebSocket("ws://localhost:8080/gobank");
                //设置给ws对象回调方法
                ws.onopen = function () {
                    console.log("已经成功连接了服务器❤。")
                    showMsg("与服务器连接成功❤")

                }
                ws.onclose = function () {
                    console.log("与服务器连接断开😒。。。")
                    showMsg("与服务器断开连接")
                }
                ws.onerror = function (e) {
                    console.log("与服务器连接发生异常。。。")
                }
                ws.onmessage = function (resp) {
                    console.log("接收到服务器消息" + resp.data);
                    //展示到聊天框
                    showMsg("other:" + resp.data);
                }

            } else {
                alert("抱歉，您的浏览器不支持WebSocket")

            }
        }

        /*发送消息*/
        function sendMsg() {
            var msg = $("#msg").val();
            if (msg == null || msg.trim() == "") {
                alert("发送消息不能为空")
                return;
            }
            //把发送的消息展示到div
            showMsg("我：" + msg)
            //清空输入框
            $("#msg").val("");
            //将msg发送到服务端
            sendMsgToServer(msg);
        }

        /*展示一些内容到div*/
        function showMsg(msg) {
            $("#msgs").append(msg + "</br>")
        }

        /**/
        function sendMsgToServer(msg) {
            if (ws) {
                ws.send(msg);//只能传字符串
            } else {
                alert("WebSo连接异常")
            }
        }
    </script>
</head>
<body>
<!--聊天的消息列表-->
<div id="msgs" style="margin: 20px;border: 1px solid #000000 ;width: 600px;height: 500px">

</div>
<input id="msg" style="margin: 20px"/>
<button onclick="sendMsg()">发送</button>
</body>
</html>